<template>
  <div>
    <div class="headr">
      <img src="../../assets/cemetery/title.png" alt="" class="pic" />
    </div>

    <div style="display: flex; justify-content: center">
      <div class="Outerlayer">
        <div
          v-for="item in picList"
          :key="item.id"
          class="cemeterylist"
          @click="Cemeterydetails(item.id)"
        >
          <img :src="imgurl + item.cover_image" alt="" class="cemeterypic" />
          <div class="titl">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :page-sizes="[8]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total"
       
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picList: [],
      imgurl: "https://www.gongminlingyuanwang.cn/",
      currentPage: 1,
      pagesize: 8,
      Total: 0,
    };
  },
  created() {
    this.getpicList(1);
  },
  methods: {
    // 获取图片
    async getpicList(page) {
      const { data: res } = await this.$axios.post("index/getCemeteryArticle",{
        pageSize: 8,
        page:page,
      });
      if (res.code == 1) {
        this.Total = res.data.total
        this.picList = res.data.data;
        console.log(this.picList);
      }
    },
    // 去墓地详情
    Cemeterydetails(id) {
      this.$router.push({
        path: "/Cemeterydetails",
        query: {
          id: id,
        },
      });
    },
    handleSizeChange(size) {
      this.pagesize = size
    },
    handleCurrentChange(currentPage) {
      //当前是哪一页
      this.currentPage = currentPage
      this.getpicList(currentPage) 
    },

  },
};
</script>

<style lang="scss">
.headr {
  display: flex;
  justify-content: center;
  padding-top: 3%;
  .pic {
    width: 310px;
    height: 54px;
  }
}
.list {
  display: flex;
  justify-content: center;
}
.Outerlayer {
  width: 1300px;
  display: flex;
  flex-wrap: wrap;
//   padding-top: 2%;
}
.cemeterylist {
  margin-left: 40px;
  width: 272px;
  height: 230px;
  border: 1px solid #EEEEEE;
  // border-top-right-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2%;
  transition: transform .2s;
  .cemeterypic {
    width: 272px;
    height: 192px;
  }
  .titl {
    margin: auto;
  }
}
.cemeterylist:hover  {
    transform: scale(1.1);
}
</style>